<template>
  <div style="height: 100%; width: 100%;">
    <el-drawer v-if="dialogVisible" :modal="false"
               :size="CONST.WORKSPACE_HEIGHT + 'px'"
               title="详情"
               :visible.sync="dialogVisible"
               @close="dialogVisible = false">
      <RelatedBetweenTerm :relatedTerm=relatedTerm></RelatedBetweenTerm>
    </el-drawer>
    <el-container style="background-color: #F0F8F8; padding-left: 30px;width: 100%; height: 100%;">
      <el-scrollbar style="margin-top: 30px; height: 100%; width: 100%;">
        <div>
          <div>
            <span style="font-size: 16px;font-weight: bold;" v-html="detailData.name"></span>
            <span style="margin-left: 60%;">
              <el-button size="mini" @click="relatedBetweenTerm">相关术语</el-button>
            </span>
          </div>
          <div v-for="nameSourceItem of detailData.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
          <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY" v-if="UTIL.isNotEmpty(detailData[prop])">
            <div class="fieldName">{{ propName }}：</div>
            <div v-if="typeof detailData[prop] === 'string'" class="name-content" v-html="detailData[prop]"></div>
            <div v-else class="name-content" v-html="UTIL.arrayToStr(detailData[prop], 'value', ';')"></div>
          </div>
          <hr style="margin-left: 0px; margin-top: 20px; width: 60%;"/>
          <div v-if="detailData.explanation.length > 0">
            <div class="fieldName">释义：</div>
            <div v-for="item in detailData.explanation" style="margin-top: 15px;">
              <div v-html="item.value"></div>
              <div
                style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; width: 65%;text-align: right;">
                <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                  {{ item.version }} -
                </div>
                <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-container>
  </div>
</template>
<script>
import RelatedBetweenTerm from "./RelatedBetweenTerm";

export default {
  name: "DetailStandard",
  components: {RelatedBetweenTerm},
  props: {
    id: String
  },
  data() {
    return {
      detailData: {
        explanation: []
      },
      relatedTerm: [],
      dialogVisible: false
    }
  },
  methods: {
    relatedBetweenTerm() {
      this.dialogVisible = true;
    }
  },
  mounted() {
    this.axios.get('/pmph/action/term/selectDetailStandardById', {
      params: {
        id: this.id
      }
    }).then((response) => {
      this.detailData = response.data;
      this.relatedTerm.push(response.data.name);
      this.relatedTerm = this.relatedTerm.concat(response.data.synonym.map(item => {
        return item.value
      }))
    })
  }
}
</script>

<style scoped>
.inline-block {
  margin-top: 15px;
}

.name-content {
  display: inline-block;
}

.fieldName {
  display: inline-block;
  margin-top: 15px;
}

.left {
  margin-left: 60px;
}

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

.knowledge-source {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0;
}

.knowledge-source-input {
  width: 20%;
}
</style>
